UI: Dark mode toggle button on Management Server by utchoang · Pull Request #5052 · apache/cloudstack

utchoang · 2021-05-31T09:33:43Z

Description

Fixes #5042

Types of changes

Breaking change (fix or feature that would cause existing functionality to change)
New feature (non-breaking change which adds functionality)
Bug fix (non-breaking change which fixes an issue)
Enhancement (improves an existing feature and functionality)
Cleanup (Code refactoring and cleanup, that may add test cases)

Feature/Enhancement Scale or Bug Severity

Feature/Enhancement Scale

Major
Minor

Bug Severity

Screenshots (if appropriate):

Light Mode (default)
Dark Mode
Project Mode

How Has This Been Tested?

yadvr · 2021-05-31T10:35:55Z

@blueorangutan ui

blueorangutan · 2021-05-31T10:37:03Z

@rhtyd a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

yadvr · 2021-05-31T10:42:16Z

@utchoang are you doing anymore work or is this ready for testing/review?

blueorangutan · 2021-05-31T10:42:20Z

UI build: ✔️
Live QA URL: http://qa.cloudstack.cloud:8080/client/pr/5052 (SL-JID-188)

yadvr · 2021-05-31T10:45:10Z

Nevermind I tested looks like it's not functional yet.

utchoang · 2021-05-31T10:49:32Z

@rhtyd
I'm still working on it and not in review mode yet. Thanks.

utchoang · 2021-06-02T03:43:49Z

@blueorangutan ui

blueorangutan · 2021-06-02T03:45:03Z

@utchoang a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2021-06-02T03:49:14Z

UI build: ✔️
Live QA URL: http://qa.cloudstack.cloud:8080/client/pr/5052 (SL-JID-198)

DaanHoogland · 2021-06-04T09:13:13Z

site looks good, can't judge the code.

shwstppr · 2021-08-03T05:54:44Z

Looks nice!

@utchoang

possible to add a "Reset to default" option in theme panel?
In project view, some text color change needed in dark mode

utchoang · 2021-08-03T07:03:47Z

@blueorangutan ui

blueorangutan · 2021-08-03T07:04:03Z

@utchoang a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2021-08-03T07:08:24Z

UI build: ✔️
Live QA URL: http://qa.cloudstack.cloud:8080/client/pr/5052 (SL-JID-472)

DaanHoogland

I like the "reset to default", LGTM

RodrigoDLopez

Manually tested. LGTM

nvazquez · 2021-08-04T17:41:56Z

Thanks all for testing, we are only missing code review @davidjumani @Pearl1594 can you handle that?

yadvr · 2021-08-09T08:39:55Z

@davidjumani have you tested it, are you lgtm on this?

apurv-1 · 2021-08-09T13:48:18Z

The UI looks awesome @utchoang!

Pointing some minor bugs, I came across while manually testing UI.

Some text fields in forms are turning white on hover(In the dark mode). Some of them are:
- Instances > Kubernetes > Create Kubernetes Cluster > Node root disk size (in GB) field.
- Images > Kubernetes ISOs > Add Kubernetes Version > Min CPU Cores & Min Memory (in MB) field.
- Infrastructure > Zone > Add Zone > Under Zone details most of the DNS fields.
- Service Offerings > Compute & System Offerings > Add Compute Offering > most of the fields.

Zones.-.CloudStack.-.Google.Chrome.2021-08-09.18-32-44.mp4

I don't know if its the issue on my machine but while choosing the Background/Text colour, It works great if I wanted to select a colour on click but, while holding the cursor and then selecting it while moving the mouse it lags(maybe because its changing colour and rendering the Background/Text colour at the same time).

Instances.-.CloudStack.-.Google.Chrome.2021-08-09.19-03-26.mp4

edit: Unfortunately colour picker drawer isn't recorded.

utchoang · 2021-08-10T02:04:39Z

@blueorangutan ui

blueorangutan · 2021-08-10T02:05:03Z

@utchoang a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2021-08-10T02:09:37Z

UI build: ✔️
Live QA URL: http://qa.cloudstack.cloud:8080/client/pr/5052 (SL-JID-496)

utchoang · 2021-08-10T02:21:26Z

@apurv-1 Can you please check case 1 again? Also for case 2, changing the text color, the background now will only apply when the lost focus from the color picker. Thanks.

apurv-1 · 2021-08-10T07:19:25Z

@apurv-1 Can you please check case 1 again? Also for case 2, changing the text color, the background now will only apply when the lost focus from the color picker. Thanks.

Great, both the changes are fixed & looks really good. Thanks!

nvazquez · 2021-08-11T03:47:11Z

@utchoang another minor issue on the dark mode: when the list view is empty, the 'No data' text is not visible

utchoang · 2021-08-11T04:53:36Z

@blueorangutan ui

blueorangutan · 2021-08-11T04:54:02Z

@utchoang a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2021-08-11T04:58:30Z

UI build: ✔️
Live QA URL: http://qa.cloudstack.cloud:8080/client/pr/5052 (SL-JID-507)

nvazquez · 2021-08-11T11:49:40Z

Thanks for the quick fix @utchoang, can you fix the latest conflict?

utchoang · 2021-08-11T12:16:10Z

@blueorangutan ui

blueorangutan · 2021-08-11T12:17:03Z

@utchoang a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2021-08-11T12:22:31Z

UI build: ✔️
Live QA URL: http://qa.cloudstack.cloud:8080/client/pr/5052 (SL-JID-508)

add button toggle dark mode

2a0da9b

yadvr added component:UI Severity:Minor labels May 31, 2021

yadvr added this to the 4.15.1.0 milestone May 31, 2021

yadvr requested review from Pearl1594, davidjumani, shwstppr and yadvr and removed request for davidjumani May 31, 2021 10:39

yadvr modified the milestones: 4.15.1.0, 4.15.2.0 May 31, 2021

utchoang added 5 commits June 1, 2021 16:59

switch components corresponding to dark mode

6fe21fd

restructure the style dark mode file

108fa16

Merge branch '4.15' into feature/ui-dark-mode

5a5fb53

fix collapse & login page

e87c6fb

fix test failed

c69d1fa

utchoang marked this pull request as ready for review June 2, 2021 06:00

yadvr modified the milestones: 4.15.2.0, 4.15.1.0 Jun 4, 2021

fix plaholder color, project chart color & reset setting

5a7b583

DaanHoogland approved these changes Aug 3, 2021

View reviewed changes

shwstppr approved these changes Aug 3, 2021

View reviewed changes

RodrigoDLopez approved these changes Aug 4, 2021

View reviewed changes

yadvr mentioned this pull request Aug 9, 2021

UI: Introduction to Dark mode with toggle Button on Management Server. #5042

Closed

fix event change color picker & error input focus color

5403877

fix empty data color

9b88a4c

Merge branch '4.15' into feature/ui-dark-mode

a634b9d

DaanHoogland merged commit 8680f7d into apache:4.15 Aug 11, 2021

utchoang deleted the feature/ui-dark-mode branch August 16, 2021 00:55

Conversation

utchoang commented May 31, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Types of changes

Feature/Enhancement Scale or Bug Severity

Feature/Enhancement Scale

Bug Severity

Screenshots (if appropriate):

How Has This Been Tested?

Uh oh!

yadvr commented May 31, 2021

Uh oh!

blueorangutan commented May 31, 2021

Uh oh!

yadvr commented May 31, 2021

Uh oh!

blueorangutan commented May 31, 2021

Uh oh!

yadvr commented May 31, 2021

Uh oh!

utchoang commented May 31, 2021

Uh oh!

utchoang commented Jun 2, 2021

Uh oh!

blueorangutan commented Jun 2, 2021

Uh oh!

blueorangutan commented Jun 2, 2021

Uh oh!

DaanHoogland commented Jun 4, 2021

Uh oh!

shwstppr commented Aug 3, 2021

Uh oh!

utchoang commented Aug 3, 2021

Uh oh!

blueorangutan commented Aug 3, 2021

Uh oh!

blueorangutan commented Aug 3, 2021

Uh oh!

DaanHoogland left a comment

Choose a reason for hiding this comment

Uh oh!

RodrigoDLopez left a comment

Choose a reason for hiding this comment

Uh oh!

nvazquez commented Aug 4, 2021

Uh oh!

yadvr commented Aug 9, 2021

Uh oh!

apurv-1 commented Aug 9, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

utchoang commented Aug 10, 2021

Uh oh!

blueorangutan commented Aug 10, 2021

Uh oh!

blueorangutan commented Aug 10, 2021

Uh oh!

utchoang commented Aug 10, 2021

Uh oh!

apurv-1 commented Aug 10, 2021

Uh oh!

nvazquez commented Aug 11, 2021

Uh oh!

utchoang commented Aug 11, 2021

Uh oh!

blueorangutan commented Aug 11, 2021

Uh oh!

blueorangutan commented Aug 11, 2021

Uh oh!

nvazquez commented Aug 11, 2021

Uh oh!

utchoang commented Aug 11, 2021

Uh oh!

blueorangutan commented Aug 11, 2021

Uh oh!

blueorangutan commented Aug 11, 2021

Uh oh!

Reviewers

Assignees

utchoang commented May 31, 2021 •

edited

Loading

apurv-1 commented Aug 9, 2021 •

edited

Loading